<template>
<div class="fullheight">
    <ht-table
      ref="htTable"
      :data="rows"
      :pageResult="pagination"
      :selection="true"
      quick-search-props="mc"
      :show-export="false"
      :show-custom-column="false"
      :default-querys="defaultQuerys"
      @loading="loadData"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button size="small" @click="showDialog()" icon="el-icon-plus"
                     v-if="viewModel!=='1'"
            >添加</el-button
          >
          <el-button
            v-popconfirm="{before: removeValid, confirm: handleRemove}"
            v-if="viewModel!=='1'"
            type="danger"
            icon="el-icon-delete"
            >删除</el-button
          >
        </el-button-group>
      </template>
      <template v-slot:search>
        <ht-table-search-panel
          :divide="3"
          :label-width="100"
          display-style="block"
        >
          <ht-table-search-field label="名称" prop="mc" />
          <ht-table-search-field
            label="是否默认"
            type="select"
            :options="options"
            prop="sfmr"
          />
          <ht-table-search-field
            label="分组"
            type="select"
            :options="groupList"
            prop="fz"
          />
        </ht-table-search-panel>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="mc"
          label="名称"
          width="250"
          align="left"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link
              type="primary"
              @click="showDialog(row.pkgzid)"
              title="查看详情"
              >{{ row.mc }}</el-link
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="gzbm" label="编码" width="260" align="left" :show-overflow-tooltip="true">
        </ht-table-column>
        <ht-table-column
          prop="sfmr"
          label="是否默认"
          width="120"
          :show-overflow-tooltip="true"
          :filters="[
            {text: '是', value: '1'},
            {text: '否', value: '0'}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.sfmr == '1'">是</el-tag>
            <el-tag v-if="row.sfmr == '0'">否</el-tag>
          </template>
        </ht-table-column>
        <!--
        <ht-table-column
          prop="bytj"
          label="必要条件"
          width="120"
          :show-overflow-tooltip="true"
          :filters="[
            {text: '是', value: '1'},
            {text: '否', value: '0'}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.bytj == '1'">是</el-tag>
            <el-tag v-if="row.bytj == '0'">否</el-tag>
          </template>
        </ht-table-column>

        <ht-table-column prop="qz" label="权重" :show-overflow-tooltip="true">
        </ht-table-column>-->
        <ht-table-column
          prop="zt"
          label="状态"
          width="120"
          :show-overflow-tooltip="true"
          :filters="[
            {text: '启用', value: '1'},
            {text: '禁用', value: '0'}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.zt == '1'">启用</el-tag>
            <el-tag type="danger" v-if="row.zt == '0'">禁用</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column prop="fz" label="分组" :show-overflow-tooltip="true">
          <template v-slot="{row}">
            <el-tag type="info" v-if="row.fz == 'default'">默认</el-tag>
            <el-tag type="success" v-else-if="row.fz == 'teacher'">老师</el-tag>
            <el-tag type="warning" v-else-if="row.fz == 'classroom'">教室</el-tag>
            <el-tag type="danger" v-else-if="row.fz == 'course'">课程</el-tag>
            <el-tag v-else>{{row.fz}}</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column prop="gzcflx" label="规则触发类型" :show-overflow-tooltip="true">
              <template v-slot="{row}">
                  <el-tag type="info" v-if="row.gzcflx == 'chromosome'">单个染色体</el-tag>
                  <el-tag type="success" v-if="row.gzcflx == 'singlePopulation'">单轮种群</el-tag>
                  <el-tag type="warning" v-if="row.gzcflx == 'populations'">所有种群</el-tag>
              </template>
        </ht-table-column>
        <ht-table-column prop="ms" label="描述" :show-overflow-tooltip="true">
        </ht-table-column>
        <ht-table-column
          prop="xjsj"
          label="创建时间"
          width="160"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="gxsj"
          label="更新时间"
          width="160"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column width="150" label="操作"  v-if="viewModel!=='1'">
          <template v-slot="{row}">
            <el-button
              v-if="row.zt == '1' && row.sfmr=='0'"
              type="danger"
              @click="handleCommand({row: row, command: 'stop'})"
              >停用</el-button
            >
            <el-button
              v-if="row.zt == '0' && row.sfmr=='0'"
              type="success"
              @click="handleCommand({row: row, command: 'start'})"
              >启用</el-button
            >
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <rule-manager-edit ref="ruleManagerEdit" :view-model="viewModel"></rule-manager-edit>
  </div>
</template>
<script>
import course from '@/api/course.js'
const ruleManagerEdit = () => import('@/views/course/rule/RuleManagerEdit.vue')

export default {
  name: 'ruleManager',
  props: {
      status: String,  // 1 启用 0 禁用
      viewModel: String, // 1 查看
  },
  components: {ruleManagerEdit},
  data() {
    return {
      dialogVisible: false,
      rows: [],
      pagination: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      rule: {},
      options: [
        {key: '1', value: '是'},
        {key: '0', value: '否'}
      ],
      groupList: [],
      defaultQuerys:[{group:'default',operation: "EQUAL",property: "zt",relation: "AND",value:this.status || 1}]
    }
  },
  computed: {
    tableHeight() {
      return this.$baseTableHeight()
    }
  },
  mounted() {
    this.getRuleGroupList()
  },
  methods: {
    getRuleGroupList() {
      course.getRuleGroupList().then(resp => {
        this.groupList = resp
      })
    },
    showDialog(id) {
      this.$refs.ruleManagerEdit.showDialog(id, this.groupList)
    },
    loadData(param, cb) {
      course
        .getRuleList(param || {})
        .then(resp => {
          let response = resp.data || resp
          this.rows = response.rows
          this.total = response.total
          this.pagination = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb && cb())
    },
    handleCommand(params) {
      switch (params.command) {
        case 'edit':
          this.$refs.ruleManagerEdit.showDialog(params.row.pkgzid)
          break
        case 'stop':
          this.$confirm('是否停用?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            course.changeRuleStatus(params.row.pkgzid, '0').then(resp => {
              if (resp.state) {
                this.$message({
                  type: 'success',
                  message: resp.message
                })
                this.$refs.htTable.load()
              } else {
                this.$message({
                  type: 'error',
                  message: resp.message
                })
              }
            })
          })
          break
        case 'start':
          this.$confirm('是否启用?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            course.changeRuleStatus(params.row.pkgzid, '1').then(resp => {
              if (resp.state) {
                this.$message({
                  type: 'success',
                  message: resp.message
                })
                this.$refs.htTable.load()
              } else {
                this.$message({
                  type: 'error',
                  message: resp.message
                })
              }
            })
          })
          break
        default:
          break
      }
    },
    removeValid() {
      if (this.$refs.htTable.selection.length == 0) {
        this.$message({message: '请至少选择一条记录', type: 'warning'})
        return false
      }
      return true
    },
    handleRemove() {
      const ids = []
      this.$refs.htTable.selection.forEach(item => {
        ids.push(item.pkgzid)
      })
      course.removeRuleData(ids.join(',')).then(() => {
        this.loadData()
      })
    }
  }
}
</script>
